
<template>
  <el-tooltip
    placement="top"
    trigger="hover"
    popper-class="error-popper"
    :content="tip || tooltipContent"
    :disabled="!tooltipContent"
    effect="light"
  >
    <div :class="tooltipContent ? 'has-error' : ''">
      <slot></slot>
    </div>
  </el-tooltip>
</template>
<script setup lang="ts">
import { ref , watchEffect} from "vue";
const props = defineProps({
  validErrors: {
    type: Object,
    default: () => {
      return {};
    },
  },
  field: {
    type: String,
    default: () => "",
  },
  tip: {
    type: String,
    default: () => "",
  },
});
const tooltipContent = ref("");
watchEffect(() => {
  const errorMsg = props.validErrors[props.field];
  tooltipContent.value = errorMsg;
  return errorMsg;
});
</script>

<style scoped lang="scss">
.has-error {
  :deep() {
    .vxe-input--inner {
      border: 1px solid #f56c6c;
    }

    .el-input__wrapper {
      box-shadow: 0 0 0 1px #f56c6c inset !important;
    }

    .el-select__wrapper {
      box-shadow: 0 0 0 1px #f56c6c inset;
    }
  }
}
</style>
